<template>
    <el-dialog v-model="visible" title="分配角色" :before-close="beforeClose">

        <el-form :model="ownForm" label-width="140px">
            <el-form-item required label="类型名称">
                <el-input v-model="ownForm.name" autocomplete="off" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="onCancel">Cancel</el-button>
                <el-button type="primary" @click="onConfirm">Confirm</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script  lang='ts' setup>
import type { IBrandList } from '@/request/PmsProductCategoryController';
import { ref, defineProps, withDefaults, defineEmits, type Ref, watch } from 'vue'

let props = withDefaults(defineProps<{
    visible: boolean,
    form: IBrandList
}>(), {
    visible: true
})

let originOwnForm = ref({}) as Ref<IBrandList>
let ownForm = ref({}) as Ref<IBrandList>
watch(
    // 当父组件传入的是引用类型数据，且在父组件中通过直接赋值的形式，由此改变了引用数据的地址，在子组件中应通过函数返回值的方式进行监听
    () => props.form, (newVal) => {
        ownForm.value = { ...newVal }
        originOwnForm.value = { ...newVal }
    })

let emits = defineEmits<{
    (event: "cancel"): void;
    (event: "confirm", row: IBrandList): void;
}>();

let onCancel = () => {
    ownForm.value = { ...originOwnForm.value }//点击取消的时候将ownForm恢复成备份的值
    emits('cancel')
}
let onConfirm = () => {
    emits('confirm', ownForm.value)
}

//关闭弹窗前的回调
let beforeClose = () => {
    emits('cancel')
}

</script>

